<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加店员</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body>
<form class="layui-form" action="" lay-filter="example" style="padding-top: 30px;">

  <div class="layui-form-item" style="padding-left: 150px">
    <div class="layui-inline">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block">
        <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item" style="padding-left: 150px">
    <div class="layui-inline">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男" checked="">
        <input type="radio" name="sex" value="女" title="女">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="padding-left: 150px">
    <div class="layui-inline">
      <label class="layui-form-label">联系方式</label>
      <div class="layui-input-block">
        <input type="text" name="telephone" lay-verify="required" autocomplete="off" placeholder="" class="layui-input" maxlength="11">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="padding-left: 150px">
    <div class="layui-inline">
      <label class="layui-form-label">职位</label>
      <div class="layui-input-block">
        <select name="position" lay-filter="zhiwei">
          <option value=""></option>
          <option value="销售">销售</option>
          <option value="收银员">收银员</option>
          <option value="线上客服">线上客服</option>
          <option value="销售经理">销售经理</option>
          <option value="店长">店长</option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="padding-left: 150px">
    <div class="layui-inline">
      <label class="layui-form-label">薪资</label>
      <div class="layui-input-block">
        <input type="number" name="salary" lay-verify="required" autocomplete="off" placeholder="" class="layui-input" maxlength="11">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="padding-left: 230px">
    <div class="layui-upload">
      <button type="button" class="layui-btn" id="test1">上传证件照</button>
      <div class="layui-upload-list">
        <img src="" class="layui-upload-img" id="demo1" style="width: 200px;height: 150px">
        <p id="demoText"></p>
      </div>
    </div>
  </div>

  <div class="layui-form-item" style="padding-left: 150px">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="add">添加店员</button>
    </div>
  </div>
</form>

</body>
<script src="../../layui/layui.js"></script>
<script>
  layui.use(['upload', 'element', 'layer','form'], function () {
    var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer
            , form = layui.form;


    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test1'
      ,url: '/uploadImage' //改成您自己的上传接口
      ,field:"image"
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });
      }
      ,done: function(res){
        //如果上传失败
        if(res.code > 0){
          return layer.msg('上传失败');
        }
        //上传成功
        $(".layui-form").append("<input  class='image' type='hidden' name='image' value='"+res.data+"'>");
      }
    });



    //监听提交
    form.on('submit(add)', function (data) {
      //获取隐藏域中的图片
      data.field.img=$(".image")[0].value;
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

      $.ajax({
        url:"/clerk/add"
        ,data:data.field
        ,type:'post'
        ,success:function(res){
          console.log(res)
          if(res.code == 0){

            layer.msg(res.msg,{icon:1,time:1000,scrollbar:false},function(){
              parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
              window.parent.location.reload()
            });

          }else{
            layer.msg(res.msg)
          }
        }
      })


      return false;
    });
  });


</script>
</body>
</html>